<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '领卷中心',
    backgroundColor: '#f5f5f5',
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <view class="coupon-page">
    <wd-sticky>
      <view style="width: 750rpx">
        <scroll-view scroll-x class="category-nav">
          <view
            v-for="category in categories"
            :key="category.value"
            class="nav-item"
            :class="{ active: activeCategory === category.value }"
            @click="handleCategoryChange(category.value)"
          >
            {{ category.label }}
          </view>
        </scroll-view>
      </view>
    </wd-sticky>
    <!-- 优惠券列表 -->
    <scroll-view
      class="coupon-list"
      scroll-y
      refresher-enabled
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <coupon-card
        v-for="coupon in receivedCoupons"
        :key="coupon.id"
        :coupon="coupon"
        :disabled="coupon.status === 2"
        @receive="handleReceive"
      />

      <wd-divider v-if="isEmpty">暂无优惠券</wd-divider>
      <wd-divider v-else-if="isLoading">加载中...</wd-divider>
      <wd-divider v-else>没有更多了</wd-divider>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'
// import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { getCouponList, getList, receiveCoupon } from '@/service/goods/coupon/coupon'
import type { CouponInfoVo } from '@/service/goods/coupon/coupon'
import CouponCard from './components/coupon-card.vue'

const store = useUserStore()
const activeCategory = ref<number>(0)
const isLoading = ref(false)
const currentPage = ref(1)
const pageSize = 10

// 优惠券数据
const receivedCoupons = ref<CouponInfoVo[]>([])

// 分类选项
const categories = ref([
  { label: '全部', value: 0 },
  { label: '通用卷', value: 1 },
  { label: '分类卷', value: 2 },
  { label: '商品卷', value: 3 },
])

// 初始化加载
onLoad(async () => {
  await loadData()
})

// 加载数据
const loadData = async (reset = true) => {
  try {
    isLoading.value = true
    if (reset) currentPage.value = 1

    const params: any = {
      current: currentPage.value,
      size: pageSize,
    }
    if (activeCategory.value !== 0) params.rangeType = activeCategory.value
    const { data, code } = await getCouponList(params)
    if (code === 200 && data) {
      if (reset) {
        receivedCoupons.value = data.records
      } else {
        receivedCoupons.value.push(...data.records)
      }
    }

    currentPage.value++
  } catch (e) {
    uni.showToast({ title: '加载失败', icon: 'error' })
  } finally {
    isLoading.value = false
    uni.stopPullDownRefresh()
  }
}

// 领取优惠券
const handleReceive = async (couponId: string) => {
  try {
    await receiveCoupon({ couponId })
    uni.showToast({ title: '领取成功', icon: 'success' })
    loadData(true)
  } catch (error) {
    uni.showToast({ title: '领取失败', icon: 'error' })
  }
}

// 下拉刷新
const onRefresh = () => loadData(true)

// 加载更多
const loadMore = () => {
  if (!isLoading.value) loadData(false)
}

// 分类切换
const handleCategoryChange = (value: number) => {
  activeCategory.value = value
  loadData(true)
}

// 计算属性
const isEmpty = computed(() => {
  return receivedCoupons.value.length === 0
})
</script>

<style lang="scss" scoped>
.coupon-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.category-nav {
  height: 80rpx;
  white-space: nowrap;
  background: #fff;
  .nav-item {
    display: inline-block;
    padding: 0 30rpx;
    font-size: 28rpx;
    line-height: 80rpx;
    color: #666;

    &.active {
      position: relative;
      font-weight: bold;
      color: $uni-bg-themes;
      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 60%;
        height: 4rpx;
        content: '';
        background: $uni-bg-themes;
        transform: translateX(-50%);
      }
    }
  }
}

.coupon-list {
  box-sizing: border-box;
  flex: 1;
  padding: 20rpx;
}
</style>
